<html>

<head>
<style type="text/css">

.bk{
  
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
}
.login{
  width: 600px;
  height: 400px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -300px;
  margin-top: -200px;
  background-color: #fff;
}
#app {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom : 0;
    width: 100%;
    height: 2400px;
}
</style>
<script type="text/javascript">
    function beforeSubmit() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        if (username.length < 6 || password.length < 6) {
            alert('格式不正确！');
            return false;
        } else {
            return true;
        }
    }
</script>
</head>

<body>
<div id="app">
  <div class="bk">
    <div class="login">

        <form action="/server_url" method="post" onsubmit="return beforeSubmit()">
          <p>用户名<input id="username" type="text" name="username" /></p>
          <p>密码<input id="password" type="password" name="password" /></p>

        </form>
        <p>
          <button id="btn-submit" onclick="beforeSubmit()">登录</button>
          <button id="btn-regist" onclick="register()">注册</button>
        </p>

    </div>
  </div>

</div>
</body>

</html>
